<template>
  <el-card class="box-card">
    <!-- 卡片头 -->
    <div slot="header" class="card_header">
      <el-form 
        :inline="true"
        :model="searchFormData">
        <el-form-item label="阶段">
          <el-select placeholder="选择阶段" v-model="selectedStage">
            <el-option 
              v-for="item in searchFormData['data']" 
              :key="item.id" 
              :label="item.name" 
              :value="item.id"
              @click.native="changSelectedStageIndex(item.index)"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务">
          <el-select placeholder="选择任务" v-model="selectedTask">
            <el-option 
            v-for="item in searchFormData['data'][selectedStageIndex].task" 
            :key="item.id" 
            :label="item.name" 
            :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="beginSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 卡片内容 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="学号" prop="casid"></el-table-column>
      <el-table-column label="所在党支部" prop="temp"></el-table-column>
      <el-table-column label="所在进度" prop="current"></el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini"  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import {request} from '../../network/request'
  export default {
    data() {
      return {
        searchFormData: {
          "data": []
        }  //搜索数据
        ,selectedStage: '' //选中的阶段
        ,selectedTask:  '' //选中的任务
        ,selectedStageIndex: 0 //阶段选择的下标
        ,tableData: [] //表格数据
      }
    }
    ,methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
      //搜索框二级联动
      ,changSelectedStageIndex(index){
        this.selectedStageIndex = index;
        this.selectedTask = "";
      }
      //开始搜索
      ,beginSearch(){
        if(this.selectedTask==""){
          request({
            url: 'stage/' + this.selectedStage
          }).then(
            res => {
              console.log(res);
              for(let i=0;i<res.user.length;i++){
                res.user[i]['current'] = res.name;
                res.user[i]['temp'] = '网络空间安全学院学生党支部';
              }
              this.tableData = res.user;
            }
          ).catch(
            err => {
              this.$message({
                message: '哎呀，搜索出了问题',
                type: 'error',
                duration: 1000
              })
            }
          )
        }else{
          request({
            url: 'task/' + this.selectedTask
          }).then(
            res => {
              for(let i=0;i<res.user.length;i++){
                res.user[i]['current'] = res.name;
                res.user[i]['temp'] = '网络空间安全学院学生党支部';
              }
              this.tableData = res.user;
            }
          ).catch(
            err => {
              this.$message({
                message: '哎呀，搜索出了问题',
                type: 'error',
                duration: 1000
              })
            }
          )
        }
      }
    }
    ,mounted(){
      //获取阶段与任务的搜索项
      request({
        url: 'stage'
        ,method: 'get'
      }).then(
        res => {
          for(let i=0;i<res.length;i++){
            res[i].index = i;
          }
          console.log(res);
          this.searchFormData["data"] = res;
        }
      ).catch(
        err => {
          this.$message({
            message: '获取搜索列表失败',
            type: 'error',
            duration: 1000
          })
        }
      )
      //初始化表格
      request({
          url: 'stage/1'
      }).then(
        res => {
          for(let i=0;i<res.user.length;i++){
            res.user[i]['current'] = res.name;
            res.user[i]['temp'] = '网络空间安全学院学生党支部';
          }
          this.tableData = res.user;
        }
      ).catch(
        err => {
          this.$message({
            message: '获取表格数据失败',
            type: 'error',
            duration: 1000
          })
        }
      )
      //测试
      console.log(this.searchFormData);
    }
  }
</script>

<style scoped>
  .el-form-item{
    margin-bottom: 0;
  }
</style>
